import React, { PureComponent } from 'react';
import { Button, Menu, Dropdown, Icon, Divider } from 'antd';
import { UpOutlined, DownOutlined, EditOutlined, PlusOutlined, DeleteOutlined,RedoOutlined } from '@ant-design/icons';
import PropTypes from 'prop-types';
import styles from './index.less';

const BUTTON_ARRAY = [{
  name: '新建',
  key: 'ADD',
  icon: 'file',
  param: {},
  function: '',
}, {
  name: '修改',
  key: 'EDIT',
  icon: 'edit',
  param: {},
  func: '',
}, {
  name: '批量删除',
  key: 'PATCH_DELETE',
  icon: 'delete',
  param: {},
  func: '',
}, {
  name: '删除',
  key: 'DELETE',
  icon: 'delete',
  param: {},
  func: '',
}, {
  name: '批量审核',
  key: 'PATCH_APPROVAL',
  icon: 'check-square',
  param: {},
  func: '',
}, {
  name: '刷新',
  key: 'REFRESH',
  // key:<RedoOutLined/>,
  icon: 'reload',
  param: {},
  func: '',
}, {
  name: '报名中',
  key: 'MATCH_SIGNING_UP',
  icon: '',
  param: {},
  func: '',
}, {
  name: '进行中',
  key: 'MATCH_PROCESSING',
  icon: '',
  param: {},
  func: '',
}, {
  name: '结束',
  key: 'MATCH_END',
  icon: '',
  param: {},
  func: '',
}, {
  name: '空闲',
  key: 'COURT_FREE',
  icon: '',
  param: {},
  func: '',
}, {
  name: '使用中',
  key: 'COURT_ONGOING',
  icon: '',
  param: {},
  func: '',
}, {
  name: '预约中',
  key: 'COURT_ORDER',
  icon: '',
  param: {},
  func: '',
}, {
  name: '暂停使用',
  key: 'COURT_PAUSE',
  icon: '',
  param: {},
  func: '',
}, {
  name: '全部',
  key: 'ALLITEMS',
  icon: '',
  param: {},
  func: '',
}, {
  name: '积分',
  key: 'RULE_SCORE',
  icon: '',
  param: {},
  func: '',
}, {
  name: '奖励',
  key: 'RULE_AWARD',
  icon: '',
  param: {},
  func: '',
}, {
  name: '大赛id',
  key: 'MATCH_ID',
  icon: 'down',
  param: {},
  func: '',
  }, {
    name: '全部',
    key: 'ALL',
    param: {},
    func: '',
  },
  {
  name: '未开始',
  key: 'MINI_MATCH_FREE',
  param: {},
  func: '',
}, {
  name: '进行中',
  key: 'MINI_MATCH_GOING',
  icon: '',
  param: {},
  func: '',
}, {
  name: '结束',
  key: 'MINI_MATCH_END',
  icon: '',
  param: {},
  func: '',
}, {
  name: '结果认定',
  key: 'MINI_MATCH_AFFIRM',
  icon: '',
  param: {},
  func: '',
}, {
  name: '比赛作废',
  key: 'MINI_MATCH_CANCEL',
  icon: '',
  param: {},
  func: '',
}, {
  name: '分隔符-竖',     // 生成分隔符
  key: 'DIVIDER_VERTICAL',
  icon: '',
  param: {},
  func: '',
}, {
  name: '分隔符-横',
  key: 'DIVIDER_HORIZONTAL',
  icon: '',
  param: {},
  func: '',
  }, {
    name: '通过',
    key: 'PASS',
    icon: '',
    param: {},
    func: '',
  }, {
    name: '√ 勾选通过审核',
    key: 'ALL_PASS',
    icon: '',
    param: {},
    func: '',
  },
  {
    name: '未通过',
    key: 'NOT_PASS',
    icon: '',
    param: {},
    func: '',
  }, {
    name: '未审核',
    key: 'NOT_VERIFY',
    icon: '',
    param: {},
    func: '',
  }, {
    name:'全部',
    key: 'ALL_USER',
    icon: '',
    param: {},
    func:'',
  }, {
    name:'＋勾选用户加入大赛',
    key: 'ADD_USERS_MATCH',
    icon:'',
    param: {},
    func:'',
  },{
    name:'导入',
    key:'EXCEL_IMPORT_USERS_INFO',
    icon:'diff',
    param:{},
    func:''
  }
];

class ToolBarGroup extends PureComponent {
  static propTypes = {
    selectedRows: PropTypes.array.isRequired,// 父组件选中的数据
    primaryBtn: PropTypes.array.isRequired,
    buildBtn: PropTypes.array,
    workSpaceBtn: PropTypes.array,
    patchBtn: PropTypes.array,
    menuBtn: PropTypes.array,
  };

  static defaultProps = {
    primaryBtn: [],
    patchBtn: [],
    menuBtn: [],
    buildBtn: [],
    workSpaceBtn: [],
    selectedRows: [],
    path: ''
  };

  constructor(props) {
    super(props);
    this.state = {
      selectPrimaryBtn: [],
      selectPatchBtn: [],
      selectMenuBtn: [],
      selectBuildBtn: [],
      selectWorkSpaceBtn: [],
    };
  }

  componentDidMount() {
    const { btnOptions } = this.props;
    const select = [];
    if (btnOptions) {
      const { primaryBtn, patchBtn, menuBtn, buildBtn, workSpaceBtn } = btnOptions;
      this.setState({
        selectPrimaryBtn: this.getBtnData(primaryBtn) || [],
        selectPatchBtn: this.getBtnData(patchBtn) || [],
        selectMenuBtn: this.getBtnData(menuBtn) || [],
        selectBuildBtn: this.getBtnData(buildBtn) || [],
        selectWorkSpaceBtn: this.getBtnData(workSpaceBtn) || [],
      });
    }
  }

  componentWillReceiveProps() {
    const { btnOptions } = this.props;
    if (btnOptions) {
      const { primaryBtn, patchBtn, menuBtn, buildBtn, workSpaceBtn } = btnOptions;
      this.setState({
        selectPrimaryBtn: this.getBtnData(primaryBtn) || [],
        selectPatchBtn: this.getBtnData(patchBtn) || [],
        selectMenuBtn: this.getBtnData(menuBtn) || [],
        selectBuildBtn: this.getBtnData(buildBtn) || [],
        selectWorkSpaceBtn: this.getBtnData(workSpaceBtn) || [],
      });
    }
  }

  getBtnData = (btnData) => {
    const resData = [];
    if (!btnData) {
      return;
    }
    btnData.forEach((v) => {
      let tmpBtn = BUTTON_ARRAY.find((o) => o.key == v.key);
      if (tmpBtn) {
        const { func, param, style, type } = v;
        tmpBtn = {
          ...tmpBtn,
          func,
          param,
          style,
          type,
        };
        resData.push(tmpBtn);
      }
    });
    return resData;
  };

  renderPrimaryBtn = () => {
    const items = [];
    const { selectPrimaryBtn } = this.state;
    if (selectPrimaryBtn.length == 0) {
      return items;
    }
    selectPrimaryBtn.forEach((v) => {
      switch (v.key) {
        case 'DIVIDER_VERTICAL':
          items.push(<Divider type='vertical' key='DIVIDER_VERTICAL' />);
          break;
        case 'DIVIDER_HORIZONTAL':
          items.push(<Divider type='horizontal' key='DIVIDER_HORIZONTAL' />);
          break;
        default:
          items.push(
            <Button
              style={v.style}
              // icon={v.icon}
              type={v.type ? `${v.type}` : 'dashed'}
              key={v.key}
              id={v.key}
              onClick={() => v.func({ ...v.param })}
            >
              {v.name}
            </Button>);
          break;
      }
    });
    return items;
  };

  renderPatchBtn = () => {
    const items = [];
    const { selectPatchBtn } = this.state;
    if (selectPatchBtn.length == 0) {
      return items;
    }
    selectPatchBtn.forEach((v) => {
      items.push(<Button icon={v.icon} key={v.key} onClick={() => v.func({ ...v.param })}> {v.name}</Button>);
    });
    return items;
  };

  renderWorkSpaceBtn = () => {
    let items = [];
    const { path } = this.props;
    const { selectBuildBtn, selectWorkSpaceBtn } = this.state;
    if (path.length === 0) {
      return items
    }
    if (path.indexOf('builds') === 1) {
      items = [];
      selectBuildBtn.forEach((v) => {
        items.push(<Button
          // icon={v.icon}
          type="dashed"
          key={v.key}
          id={v.key}
          onClick={() => v.func({ ...v.param })}
        > {v.name}
        </Button>);
      });
    }
    if (path.indexOf('workspace') === 1) {
      items = [];
      selectWorkSpaceBtn.forEach((v) => {
        items.push(<Button
          // icon={v.icon}
          type="dashed"
          key={v.key}
          id={v.key}
          onClick={() => v.func({ ...v.param })}
        > {v.name}
        </Button>);
      });
    }
    return items;
  };

  renderMenuBtn = () => {
    const items = [];
    const { selectMenuBtn } = this.state;
    if (selectMenuBtn.length == 0) {
      return items;
    }
    selectMenuBtn.forEach((v) => {
      items.push(<Menu.Item key={v.key} onClick={() => v.func({ ...v.param })}> {v.name}</Menu.Item>);
    });
    return (<Menu>{items}</Menu>);
  };

  showMenu = () => {
    const { selectMenuBtn } = this.state;
    const menu = this.renderMenuBtn();
    if (selectMenuBtn.length > 0) {
      return (
        <Dropdown overlay={menu}>
          <Button>
            更多操作 <Icon type="down" />
          </Button>
        </Dropdown>
      );
    }
    return '';

  };

  render() {
    // selectedRows表示上层选中的数据
    const { selectedRows, btnDraw } = this.props;
    return (
      <div className={styles.listOperator}>
        {this.renderPrimaryBtn()}
        {selectedRows.length > 0 && (
          <span>
            {this.renderPatchBtn()}
            {this.showMenu()}
          </span>
        )}
        {(
          <span>
            {this.renderWorkSpaceBtn()}
            {this.showMenu()}
          </span>
        )}
      </div>
    );
  }
}

export default ToolBarGroup;
